<template>
    <view>
        <u-popup v-model="showPopup" mode="bottom" class="tags-view" height="40%">
            <scroll-view>
                <u-row justify="center">
                    <u-row justify="start" class="title">
                        <text>{{ label }}</text>
                    </u-row>
                    <u-row class="item" gutter="10">
                        <u-col
                            span="2"
                            v-for="({ label, select }, k) in tagList"
                            :key="k"
                            @longpress.native="longPress(k)"
                        >
                            <u-tag
                                ref="tagRef"
                                :type="select ? 'primary' : 'info'"
                                shape="circle"
                                :text="label"
                                mode="light"
                                @click="tagClick(k)"
                                class="tag"
                            />
                        </u-col>
                    </u-row>
                    <u-row justify="space-between" class="item">
                        <u-input
                            v-model="newTag"
                            :border="true"
                            :auto-height="true"
                            height="50"
                            style="margin-right: 15rpx"
                            clearable
                        />
                        <u-button type="default" size="mini">添加</u-button>
                    </u-row>
                </u-row>
            </scroll-view>
        </u-popup>
        <u-mask
            :show="maskShow"
            @click="maskShow = false"
            z-index="99999"
            :custom-style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }"
        >
            <view class="mask-panel">
                <u-row>{{ panelTitle }}</u-row>
                <u-row class="item" justify="center" style="height: 100%">
                    <u-input
                        v-model="curTag"
                        :border="true"
                        :auto-height="true"
                        height="50"
                        clearable
                        class="mask-input"
                    />
                </u-row>
                <u-row justify="space-between" class="btns">
                    <text>取消</text>
                    <text>提交</text>
                </u-row>
            </view>
        </u-mask>
    </view>
</template>
<script>
    import { emotionsTags } from './data.js'
    export default {
        name: 'Tags',
        props: {
            label: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                showPopup: false,
                tagList: null,
                addBtnWidth: 0,
                newTag: '',
                maskShow: false,
                curTag: null,
                panelTitle: '',
            }
        },
        mounted() {
            if (!this.tagList)
                uni.setStorage({
                    key: 'emotions-tags',
                    data: emotionsTags,
                })
            const arr = []
            for (const { label } of uni.getStorageSync('emotions-tags')) {
                arr.push({
                    label,
                    select: false,
                })
            }
            this.tagList = arr
        },
        methods: {
            setShowPopup(val) {
                this.showPopup = val
            },
            tagClick(i) {
                this.tagList[i].select = !this.tagList[i].select
            },
            longPress(i) {
                this.maskShow = true
                this.curTag = this.tagList[i].label
                this.panelTitle = '编辑'
            },
            setModalShow(val) {
                this.maskShow = val
            },
            modalConfirm() {
                this.maskShow = false
            },
        },
    }
</script>
<style lang="scss">
    .tags-view {
        width: 100%;
        letter-spacing: 4rpx;
        .title {
            width: 90%;
            font-size: 14px;
            margin: 30rpx 0rpx;
            font-weight: bold;
        }
        .item {
            width: 90%;
            .tag {
                margin-bottom: 20rpx;
                text-align: center;
            }
        }
    }
    .mask-panel {
        width: 60%;
        background: white;
        border-radius: 20rpx;
        padding: 20rpx 24rpx;
        .mask-input {
            background: white;
            margin: 20rpx 0rpx;
        }
        .btns {
            padding: 0rpx 6rpx;
            font-size: 20rpx;
            color: #ff7aa7;
        }
    }
</style>
